<template>
  <div>
    <el-table :data="courseList.filter((data) => !search || data.Name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
      <el-table-column label="名称" prop="Name" sortable> </el-table-column>
      <el-table-column label="类型" prop="Class" sortable> </el-table-column>
      <el-table-column label="学分" prop="Credit" sortable> </el-table-column>
      <el-table-column label="周几" prop="Day" sortable> </el-table-column>
      <el-table-column label="第几节" prop="Time" sortable> </el-table-column>
      <el-table-column label="上课学期" prop="Term" sortable> </el-table-column>
      <el-table-column label="上限人数" prop="Max" sortable> </el-table-column>
      <el-table-column align="right">
        <!-- eslint-disable -->
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入课程名搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" :disabled="buttonDisable" @click="detail(scope.row.Name, scope.row.Max)">选课名单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'选课人数：' + this.courseDetail.length + '/' + max" :visible.sync="dialogTableVisible">
      <el-table :data="courseDetail">
        <el-table-column property="ID" label="学号"></el-table-column>
        <el-table-column property="Name" label="姓名"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['courseList'],
  name: 'TeacherCourse',

  data() {
    return {
      search: '',
      courseDetail: [],
      buttonDisable: false,
      dialogTableVisible: false,
      max: 0
    }
  },

  methods: {
    async detail(courseName, max) {
      this.buttonDisable = true
      const ID = localStorage.getItem('token').split('/')[1]
      const { data: res } = await this.$http.post('/getCourseSelect', { name: courseName, teacherID: ID })
      this.courseDetail = res
      this.dialogTableVisible = true
      this.buttonDisable = false
      this.max = max
    }
  }
}
</script>

<style lang="less" scoped></style>
